import React, { useEffect, useMemo } from 'react';
import { ISession, ITarget } from '@/ts/core';
import './index.less';
import PublicInfo from '../unitSetting/publicInfo';
import WebSite from './webSite';
import PageInfo from './page';
import PlatformSetting from './platform';
import ModelSetting from '../common/modelSetting';
import AccoutSetting from '../../info/accoutSetting';

interface IProps {
  target: ITarget;
  session: ISession;
}
const TargetSetting: React.FC<IProps> = ({ target, ...other }) => {
  const list = useMemo(() => {
    let defaultList = [
      { label: '公开信息', id: 'publicInfo' },
      { label: '平台设置', id: 'platformSetting', targetTypes:['组织群','群组']  },
      { label: '页面设置', id: 'pageSetting', targetTypes:['人员','单位'] },
      { label: '首页网站', id: 'webSite' , targetTypes:['人员','单位'] },
      { label: '工作台设置', id: 'workbench' },
      { label: '模型设置', id: 'modalSetting' },
    ];
    if (target.typeName === '人员') {
      defaultList.splice(1, 0, { label: '账号和安全', id: 'account' });
    }
    return defaultList.filter((i) => !i.targetTypes || i.targetTypes.includes(target.typeName));
  }, [target.typeName]);

  const [selected, setSelected] = React.useState<{ id: string; label: string }>({
    label: '公开信息',
    id: 'publicInfo',
  });

  const renderContent = (item: { id: string; label: string }) => {
    switch (item.label) {
      case '公开信息':
        return <PublicInfo id={item.id} target={target} {...other} readonly={true} />;
      case '平台设置':
        return <PlatformSetting id={item.id} target={target} {...other} />;
      case '首页网站':
        return <WebSite id={item.id} target={target} {...other} />;
      case '页面设置':
        return <PageInfo id={item.id} target={target} {...other} />;
      case '模型设置':
        return <ModelSetting id={item.id} target={target} />;
      case '账号和安全':
        return <AccoutSetting {...target} />;
      default:
        return <></>;
    }
  };

  useEffect(() => {
    scrollToElement(selected.id);
  }, [selected]);

  const scrollToElement = (elementId: string): void => {
    const element = document.getElementById(elementId);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
    } else {
      console.warn(`Element with ID "${elementId}" not found.`);
    }
  };

  //左右布局
  return (
    <div className="setting-container">
      <aside className="setting-aside">
        <ul className="setting-aside-list">
          {list.map((item) => (
            <li
              key={item.id}
              className={`setting-aside-list-item ${
                selected.id === item.id ? 'active' : ''
              }`}
              onClick={() => setSelected(item)}>
              {item.label}
            </li>
          ))}
        </ul>
      </aside>
      <main className="setting-content">{list.map((item) => renderContent(item))}</main>
    </div>
  );
};
export default TargetSetting;
